import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  Redirect
} from 'react-router-dom'

function One(props){
  return <>
    <h2>one</h2>
    <Link to="/two">跳转到two</Link>

    <hr></hr>
    <Switch>
      <Route path="/one/a" render={()=> <h3>a</h3>}></Route>
      <Route path="/one/b" render={()=> <h3>B</h3>}></Route>
    </Switch>
  </>
}

function Two(props){
  function jump(){
    props.history.push('/one')
  }
  return <>
    <h2>Two</h2>
    <button onClick={jump}>跳转到one</button>
  </>
}

function Sub() {
  return (
    <div>
      App
      <Router>
        <Switch>
           {/* 应为one组件里面有子路由, 所以不能使用exact属性 */}
          <Route path="/one">
            <One></One>
          </Route>

          <Route path="/two" component={Two}></Route>

          <Redirect from="/" to="/one"></Redirect>

        </Switch>
      </Router>      
    </div>
  );
}
export default Sub;
